<template>
  <div class="my-skins">
    <div class="section-header">
      <i class="mdi mdi-image-multiple"></i>
      <h3>我的皮肤</h3>
    </div>
    <div class="skin-grid">
      <div
          v-for="(skin, index) in paginatedSkins"
          :key="index"
          class="skin-card"
          :class="{ selected: selectedSkinIndex === (currentPage - 1) * pageSize + index }"
          @click="selectSkin((currentPage - 1) * pageSize + index)"
      >
        <div class="skin-image-container">
          <img :src="`https://mc-heads.net/skin/${skin.uuid}`"  class="skin-image" alt="skin">
        </div>
        <div class="skin-name">{{ skin.name  }}</div>
      </div>
    </div>

    <div class="skin-footer">
      <el-pagination
          layout="prev, pager, next"
          :total="skinLibrary.length"
          :page-size="pageSize"
          v-model:current-page="currentPage"
          @current-change="handlePageChange"
      />
      <button class="save-skin-btn" @click="saveSkinChanges" v-if="character">
        <i class="mdi mdi-content-save"></i> 保存皮肤
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ElMessage } from 'element-plus'

const props = defineProps({
  skinLibrary: {
    type: Array,
    required: true
  },
  selectedSkinIndex: {
    type: Number,
    default: -1
  },
  character: {
    type: Object,
    default: null
  }
})

const emit = defineEmits(['select-skin', 'save-skin'])

const currentPage = ref(1)
const pageSize = ref(6)

const paginatedSkins = computed(() => {
  const start = (currentPage.value  - 1) * pageSize.value
  const end = start + pageSize.value
  return props.skinLibrary.slice(start,  end)
})

const selectSkin = (index) => {
  emit('select-skin', index)
}

const saveSkinChanges = () => {
  if (props.selectedSkinIndex  >= 0) {
    emit('save-skin', {
      characterId: props.character.id,
      skinUuid: props.skinLibrary[props.selectedSkinIndex].uuid
    })
    ElMessage.success(' 皮肤已保存')
  } else {
    ElMessage.warning(' 请先选择皮肤')
  }
}

const handlePageChange = (page) => {
  currentPage.value  = page
}
</script>

<style scoped>
.my-skins {
  width: 280px;
  padding: 20px;
  background-color: #13141f;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.skin-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 12px 0;
}

.skin-card {
  display: flex;
  flex-direction: column;
  padding: 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  background-color: rgba(255, 255, 255, 0.05);
}

.skin-card:hover {
  background-color: rgba(78, 125, 228, 0.1);
}

.skin-card.selected  {
  background-color: rgba(16, 185, 129, 0.2);
  border: 1px solid #10b981;
}

.skin-image-container {
  width: 100%;
  aspect-ratio: 1/1;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border-radius: 4px;
}

.skin-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
}

.skin-name {
  width: 100%;
  font-size: 14px;
  text-align: center;
  margin-top: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.skin-footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.save-skin-btn {
  width: 100%;
  padding: 12px;
  background: linear-gradient(90deg, #4e7de4, #10b981);
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-weight: 500;
}

.save-skin-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

@media (max-width: 480px) {
  .skin-card {
    padding: 4px;
  }

  .skin-name {
    font-size: 12px;
  }
}

@media (max-width: 1200px) {
  .my-skins {
    width: 100%;
    order: 4;
    border-left: none;
  }
}
</style>